<template>
    <div class="productDetils">
        <!-- <div class="productDetilsHead">

        </div> -->
        <div class="Left total">
            <div class="LeftHead">
                <h2>
                    {{ List.productName }}
                </h2>
                <span style="color:blue;margin-left:10px;cursor:pointer" @click="Back">返回</span>
            </div>
            <div class="LeftDody">
                <div class="LeftDodyP">
                    <span class="spanTitel">上次修改时间:</span>
                    <span class="spanContent">{{ DateList }}</span>
                </div>
                <div class="LeftDodyP">
                    <span class="spanTitel">规格:</span>
                    <span class="spanContent">{{ productSpecification }}</span>
                </div>

            </div>
            <div class="LeftDody">
                <div class="LeftDodyP">
                    <span class="spanTitel">商品标识:</span>
                    <span class="spanContent">{{ List.productId }}</span>
                </div>

                <div class="LeftDodyP">
                    <span class="spanTitel">商品总数:</span>
                    <span class="spanContent">{{ List.productNumber }}</span>
                </div>
            </div>
            <div class="LeftFoolter">
                分布仓库：
                {{ StashTitle }}
            </div>
            <div class="cavns" ref="cavns" style="width: 90%;height:300px"></div>
        </div>
        <div class="rigth total">
            <div class="rigthHead">
                <span class="rigthHeadSp" :class="FlagColor == 3 ? 'actve' : ''" @click="ActveColor(3)">全部记录</span>
                <span class="rigthHeadSp" :class="FlagColor == 1 ? 'actve' : ''" @click="ActveColor(1)">入库记录</span>
                <span class="rigthHeadSp" :class="FlagColor == 2 ? 'actve' : ''" @click="ActveColor(2)">出库记录</span>
            </div>
            <div class="rightContent">
                <div class="rightContentBox" ref="rightContentBox" @mouseenter="mousemoveList" @mouseleave="mouseleaveList">
                    <div v-if="ListStorage.length > 0">
                        <div ref="rightContentBoxp" class="rightContentBoxp" v-for="(item, index) in ListStorage"
                            :key="index">
                            <span>修改时间:{{ item.storageTime }}</span>
                            <span style="margin-left:10px">操作员id:{{ item.storageAdminId }}</span>
                            <a-button type="text" @click="Detils(item.storageId)">查看详情</a-button>
                        </div>
                    </div>
                    <div v-else>
                        <a-empty description="暂无数据">
                        </a-empty>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗 -->
        <div>
            <div class="AddStash">
                <a-modal v-model:visible="visible" cancelText="取消" okText="提交" :title="Title" @cancel="visible = false"
                    @ok="visible = false">
                    <div class="EditBox">
                        <div class="box">
                            <span class="span1">操作员工号：</span>
                            <span class="span2">{{ StorageList.storageAdminId }}</span>
                        </div>
                        <div class="box">
                            <span class="span1">操作员姓名：</span>
                            <span class="span2">{{ StorageList.storageAdminName }}</span>
                        </div>
                    </div>
                    <div class="EditBox">
                        <div class="box">
                            <span class="span1">商品id：</span>
                            <span class="span2">{{ StorageList.storageProductId }}</span>
                        </div>
                        <div class="box">
                            <span class="span1">商品名称：</span>
                            <span class="span2">{{ StorageList.storageName }}</span>
                        </div>
                    </div>
                    <div class="EditBox">
                        <div class="box">
                            <span class="span1">商品规格：</span>
                            <span class="span2">{{ StorageList.storageVolume }}</span>
                        </div>
                        <div class="box">
                            <span class="span1">操作时间：</span>
                            <span class="span2">{{ StorageList.storageTime }}</span>
                        </div>
                    </div>
                    <div class="EditBox">
                        <div class="box">
                            <span class="span1">操作方式：</span>
                            <span class="span2">{{ StorageList.storageState }}</span>
                        </div>
                        <div class="box">
                            <span class="span1">操作数量：</span>
                            <span class="span2">{{ StorageList.storageNumber }}</span>
                        </div>
                    </div>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ProductSelectId, StashSelectList, StorageSelectId, StorageSelect, StorageSelectIdEcharts } from "../../Axios/General";
import { area } from "../../utils/unit";
import { Time } from "../../utils/Time";
import { useRouter } from "vue-router"
import * as echarts from "echarts";



const router = useRouter()
const route = useRoute()
const List = ref({ productName: "", productId: "", productNumber: "" })
const DateList = ref()
const visible = ref(false)
const timer = ref()
const cavns = ref()
const Title = ref("")
const num = ref(0)
const EchartsList = ref()


const StorageList = ref({
    storageAdminName: "",
    storageAdminId: "",
    storageProductId: "",
    storageName: "",
    storageVolume: "",
    storageTime: "",
    storageState: "",
    storageNumber: ""
})
const rightContentBox = ref()
const rightContentBoxp = ref()

const FlagColor = ref(3)
const StashList = ref()
const ListStorage = ref([{ storageTime: "", storageAdminId: "", storageId: "" }])
const StashTitle = ref("")
const productSpecification = ref()

const ee = async () => {
    if (route.query.id) {
        const res = await StorageSelectIdEcharts({ storageProductId: route.query.id })
        if (res.code == 200) {
            EchartsList.value = res.data
        }

    }
    let datas = [{}]

    let one = EchartsList.value.split(",")
    one.shift()
    one.shift()
    for (let index = 0; index < one.length / 2; index++) {
        datas.push({
            name: one[index + index],
            value: one[index + index + 1]
        })
    }
    datas.shift()



    var myChart = echarts.init(cavns.value);
    // 绘制图表
    myChart.setOption({
        title: {
            text: `${List.value.productName}商品数量记录`,
            left: 'center'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        tooltip: {},
        // xAxis: {
        //     // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        // },
        // yAxis: {},
        series: [
            {
                name: '销量',
                type: 'pie',
                data: datas
            },
        ]
    });


}

onMounted(async () => {
    await init()
    await initDate()
    scroll()
    ee()
})
const Detils = async (num) => {
    visible.value = true

    const res = await StorageSelect({ storageId: num })
    if (res.code == 200) {
        Title.value = `${res.data.storageName}信息详情`

        StorageList.value.storageAdminName = res.data.storageAdminId.split(",")[1]
        StorageList.value.storageAdminId = res.data.storageAdminId.split(",")[0]
        StorageList.value.storageProductId = res.data.storageProductId
        StorageList.value.storageName = res.data.storageName
        StorageList.value.storageVolume = area(res.data.storageVolume)
        StorageList.value.storageTime = Time(res.data.storageTime)
        StorageList.value.storageState = res.data.storageState == 1 ? "入库" : "出库"
        StorageList.value.storageNumber = res.data.storageNumber
    } else {
        Title.value = `商品信息详情`
    }

}
const ActveColor = async (id) => {
    FlagColor.value = id
    await initDate()
    num.value = 0
    rightContentBox.value.scrollTop = num.value
    mousemoveList()
    setTimeout(scroll, 1000)

}
const init = async () => {

    if (route.query.id) {
        const res = await ProductSelectId({ productId: route.query.id })

        if (res.code == 200) {
            List.value = res.data

            productSpecification.value = area(parseFloat(res.data.productSpecification))
            DateList.value = Time(new Date(res.data.productTime))
            const split = res.data.productStash.split(",");
            const res1 = await StashSelectList(split)
            if (res1.code == 200) {

                for (let index = 0; index < res1.data.length; index++) {
                    index == res1.data.length - 1 ? StashTitle.value += res1.data[index].stashName + "。" : StashTitle.value += res1.data[index].stashName + ","

                }

                StashList.value = res1.data
            }

        }

    }
}
const initDate = async () => {
    if (route.query.id) {
        const res = await StorageSelectId({ storageProductId: route.query.id, storageState: FlagColor.value })
        if (res.code == 200) {
            ListStorage.value = res.data
            if (ListStorage.value.length > 0) {
                ListStorage.value.forEach(el => {
                    el.storageTime = Time(new Date(el.storageTime))

                })
            }
        }
    }
}
const scroll = () => {
    const one = 52

    if (rightContentBox.value) {
        const numers = rightContentBox.value.scrollHeight - rightContentBox.value.clientHeight


        timer.value = setInterval(() => {
            num.value += one

            if (num.value > numers) {
                num.value = 0
            }
            nextTick(() => {


            })
            if (rightContentBox.value) {
                rightContentBox.value.scrollTop = num.value

            }

        }, 1000)
    }


}
const mousemoveList = () => {
    clearInterval(timer.value)
}
const mouseleaveList = () => {
    scroll()
}

const Back = () => {
    mousemoveList()


    router.back()
}
</script>

<style lang="scss" scoped>
.productDetils {
    .total {
        display: inline-block;
        width: 48%;
        min-height: 100%;
    }

    .Left {

        .LeftHead {
            width: 100%;
            text-align: center;

            h2 {
                display: inline-block;

            }
        }

        .LeftDody {
            width: 100%;
            margin-bottom: 10px;
            margin-left: 20px;

            .LeftDodyP {
                display: inline-block;
                margin-right: 15px;

                .spanTitel {
                    letter-spacing: 1px;
                    color: #666;
                }
            }
        }

        .LeftFoolter {
            margin-left: 20px;
            font-size: 16px;
            letter-spacing: 1px;
            margin-bottom: 40px;

        }

    }

    .rigth {
        vertical-align: top;

        .rigthHead {
            .rigthHeadSp {
                display: inline-block;
                border: 1px #666 solid;
                padding: 10px;
                border-left: none;
                cursor: pointer;
            }

            &:nth-child(1) {
                border-left: 1px #666 solid;

            }

            .actve {
                color: red;
            }
        }

        .rightContent {
            height: 200px;
            width: 400px;
            overflow: hidden;

            .rightContentBox {
                overflow: auto;
                width: 416px;
                height: 100%;

                .rightContentBoxp {
                    margin: 0;
                    margin-bottom: 20px;
                }
            }
        }
    }



}


.EditBox {
    .box {
        display: inline-block;

        margin-right: 20px;

        .span1 {
            letter-spacing: 1px;
        }
    }
}
</style>